<template>
  <div class="cdiv">
    <video style="width: 100%;z-index: 0;position: absolute;
      object-fit: cover;background-color: #1a1a1a;
      margin: 0;top: 0;
      height: 890px"
           loop muted autoplay
           :src="imgUrl"
           :controls="false"
           ref="myVideo"
           controls  type="video/mp4">
    </video>
  </div>
  <div class="zdiv">
    <el-container style="width :100%;height: auto;margin: 0 auto" >
      <el-main  style="padding: 0px;overflow: hidden;">
        <el-card style="width: 733px;height: auto;margin: 0 auto;margin-right: 5%;background-color: rgba(255,255,255,0);border: 0">
          <el-form>
            <span style="font-weight: bolder;font-size: 30px">欢迎注册知友圈</span><br>
            用户名:<el-input type="text" placeholder="用户名" style="height: 40px;margin-bottom: 20px" v-model="user.username"></el-input>
            <sapn>密码:</sapn>
            <el-input type="password" placeholder="密码" v-model="user.password"  style="height: 40px;margin-top: 10px;">
              <template #append>
                <el-icon><View /></el-icon>
                <!--                          <el-icon><Hide /></el-icon>-->
              </template>
            </el-input>
            <el-button style="padding: 8px 110px;margin-top: 30px;margin-left: 35%;z-index: 3" @click="login()">
              <span><a class="s2" style="text-decoration: none"  >注册</a></span></el-button>
          </el-form>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>


<script setup>
import {ref} from "vue";
// const activeName=ref('third');
const imgUrl=ref("/video/星星.mp4");
import { ChatDotRound, PictureRounded, View, Share, Upload } from '@element-plus/icons-vue';
import qs from "qs";
import axios from "axios";

const user=ref({username:"",password:"",phone:""})
const login =()=>{
  let data=qs.stringify(user.value);
  axios.post(BASE_URL.PASSPORT+'/user/register',data).then((response)=>{
    if(response.data.state===200){
      location.href="/login";
    }else{
      return response.data.msg;
    }
  })
}

</script>
<style scoped>

.cdiv {
  height: 650px;
  width: 100%;
}
.s2{
  color: #454545;
  font-size: 15px;
}
.s2:hover{
  color: gray;
}

.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.zdiv{
  height: 450px;
  width: 100%;
  position: absolute;
  top: 25%;
  right: 25%;
}
</style>